<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      body {
        background-color: #f5f5f5;
      }
      * {
        margin: 0 auto;
      }
      #box {
        width: 600px;
        background-color: #fff;
        border-radius: 10px;
        padding-top: 30px;
      }
      #task {
        width: 250px;
        height: 40px;
        padding-left: 10px;
        font-size: 26px;
        border-radius: 15px 0 0 15px;
        border-color: aqua;
        border-right: none;
      }
      h2 {
        margin-bottom: 30px;
        font-family: '微软雅黑';
        color: aqua;
      }
      #btn {
        position: relative;
        bottom: 4.5px;
        width: 70px;
        height: 46px;
        border-radius: 0 15px 15px 0;
        /* border-color: aqua; */
        /* background-color: aquamarine; */
        border-color: #e0c3fc;
        background-image: linear-gradient(120deg, #e0c3fc 0%, #8ec5fc 100%);
        border-left: none;
        cursor: pointer;
        margin-bottom: 30px;
      }
      ol {
        width: 400px;
        font-size: 22px;
        text-align: left;
      }
      ol li {
        position: relative;
        border-bottom: 1px solid #cfd9df;
        margin-bottom: 5px;
        height: 45px;
        line-height: 45px;
      }
      ol li button {
        padding: 5px;
        border-radius: 5px;
        border-color: #f5f5f5;
        cursor: pointer;
        background-color: aquamarine;
      }
      .shanc {
        position: absolute;
        right: 120px;
      }
      .huifu {
        position: absolute;
        right: 0;
      }
    </style>
  </head>
  <body>
    <div id="box" align="center">
      <h2>今日任务</h2>
      <input type="checkbox" id="all" /> <input type="text" id="task" /><button
        id="btn"
      >
        添加
      </button>
      <ol id="list"></ol>
    </div>
  </body>
  <script>
    window.onload = function () {
      //添加按钮点击事件
      btn.addEventListener('click', btnFun)
      //输入框键盘事件
      task.addEventListener('keyup', btnFun)
      //ol委托事件
      list.addEventListener('click', olFun)
      //全选值改变事件
      all.addEventListener('change', allFun)
      xuanRanFun()
    }
    //全选
    function allFun() {
      let chkObj = Array.from(document.getElementsByClassName('chk'))
      chkObj.forEach((item) => {
        item.checked = this.checked
      })
      chkFun()
    }
    //委托事件
    function olFun() {
      if (event.target.nodeName == 'BUTTON') {
        if (event.target.innerHTML == '删除') {
          let index = event.target.getAttribute('index')
          shanxianFun(index)
        }
        if (event.target.innerHTML == '恢复初始状态') {
          let index = event.target.getAttribute('index')
          huifunFun(index)
        }
      }
    }
    function huifunFun(index) {
      data = JSON.parse(localStorage.getItem('data'))
      data[index].state = 3
      let liObj = document.getElementsByClassName('lii')
      liObj[index].style.textDecoration = 'none'
      liObj[index].style.color = 'black'
      localStorage.setItem('data', JSON.stringify(data))
    }
    function shanxianFun(index) {
      data = JSON.parse(localStorage.getItem('data'))
      data[index].state = 2
      let liObj = document.getElementsByClassName('lii')
      liObj[index].style.textDecoration = 'line-through'
      liObj[index].style.color = '#ccc'
      liObj[index].firstElementChild.checked = false
      localStorage.setItem('data', JSON.stringify(data))
    }
    //存储数据
    function btnFun() {
      if (event.keyCode == 13 || event.type == 'click') {
        let taskObj = task.value
        let data = localStorage.getItem('data')
        if (data == null) {
          data = [
            {
              task: taskObj,
              state: 4,
            },
          ]
        } else {
          data = JSON.parse(data)
          data.push({
            task: taskObj,
            state: 4,
          })
        }
        task.value = ''
        localStorage.setItem('data', JSON.stringify(data))
        xuanRanFun()
      }
    }
    //渲染列表
    function xuanRanFun(data) {
      data = JSON.parse(localStorage.getItem('data'))
      if (data == null) {
        return false
      }
      let html = ``
      data.forEach((item, index) => {
        html += `  <li class="lii" ${
          item.state == 2
            ? 'style="text-decoration:line-through;color:#ccc"'
            : ''
        }>
          <input class="chk" type="checkbox" index="${index}" value="1" ${
          item.state == 1 ? 'checked' : ''
        }/> <span>${item.task}</span>&emsp;<button
            value="2"
            class="shanc"
            index="${index}"
          >删除</button
          >&emsp;<button value="3" index="${index}" class="huifu">恢复初始状态</button>
        </li>`
      })

      document.getElementById('list').innerHTML = html
      let chkObj = Array.from(document.getElementsByClassName('chk'))
      chkObj.forEach((item) => {
        item.addEventListener('change', chkFun)
      })
      panduanFun(chkObj)
    }
    //每次渲染列表判断check的状态
    function panduanFun(chkObj) {
      chkObj.forEach((item) => {
        if (item.checked) {
          item.parentNode.style.color = 'green'
        } else {
        }
      })
    }
    //单选值改变事件
    function chkFun() {
      data = JSON.parse(localStorage.getItem('data'))
      let index = this.getAttribute('index')
      if (data[index].state == 2) {
        event.preventDefault()
      }
      if (this.checked) {
        data[index].state = this.value
        this.parentNode.style.color = 'green'
      } else {
        data[index].state = 0
      }
      localStorage.setItem('data', JSON.stringify(data))
      xuanRanFun()
    }
  </script>
</html>
